<template>
    <div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item label="添加图片" prop="photo">
                 <Upload :row="ruleForm.photo" @OK="OKdata2"></Upload>
            </el-form-item>
            <el-form-item label="等级" prop="levelLimit">
                <el-input v-model="ruleForm.levelLimit" />
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-select v-model="ruleForm.type" placeholder="请选择">
                    <el-option label="打折卷" value="打折卷" />
                    <el-option label="抵扣卷" value="抵扣卷" />
                </el-select>
            </el-form-item>
            <el-form-item label="折扣" prop="discountValue">
                <el-input v-model="ruleForm.discountValue" @input="() => {
                    if (ruleForm.type == '打折卷') {
                        ruleForm.maxDiscountValue = ''
                    } else {
                        ruleForm.maxDiscountValue = ruleForm.discountValue
                    }
                }">
                    <template #append>
                        <span v-if="ruleForm.type == '打折卷'">折</span>
                        <span v-if="ruleForm.type == '抵扣卷'">元</span>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="最高抵扣" prop="maxDiscountValue">
                <el-input v-model="ruleForm.maxDiscountValue" :disabled="ruleForm.type == '抵扣卷'">
                    <template #append>
                        <span>元</span>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input v-model="ruleForm.description" type="textarea" />
            </el-form-item>
            <el-form-item label="规则" prop="rule">
                使用规则 满<el-input v-model="ruleForm.rule" />元才能使用
            </el-form-item>
            <el-form-item label="有效期" prop="period">
                <el-input v-model="ruleForm.period">
                    <template #append>
                        <span>天</span>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确认
                </el-button>
                <el-button @click="closeAdd()">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { memberEquitiesAdd, memberEquitiesUpdate } from '@/api/permission.js'
import { ElMessage } from 'element-plus'
import { deletePhoto } from '@/api/merchant.js'
import Upload from '@/components/elUpload/index.vue'
const props = defineProps({
    isAdd: {
        type: Boolean,
        default: true, // 默认值为 true
    },
    row: {
        type: Object,
        default: () => ({}), // 默认值为一个空对象
    },
})
const emit = defineEmits(['closeAdd', 'closeOK'])
const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = reactive({
    levelLimit: '',
    type: '打折卷',
    discountValue: '',
    description: '',
    maxDiscountValue: '',
    rule: '',
    period: '',
    photo: '',
})

const rules = reactive(
    {
        type: [
            { required: true, message: '请选择', trigger: 'change' },
        ],
        levelLimit: [
            { required: true, message: '请输入', trigger: 'blur' },
        ],
        discountValue: [
            { required: true, message: '请输入', trigger: 'blur' },
        ],
        description: [
            { required: true, message: '请输入', trigger: 'blur' },
        ],
        maxDiscountValue: [
            { required: true, message: '请输入', trigger: 'blur' },
        ],
        rule: [
            { required: true, message: '请输入', trigger: 'blur' },
        ],
        period: [
            { required: true, message: '请输入', trigger: 'blur' },
        ],
        photo: [
            { required: true, message: '请输入', trigger: 'change' },
        ],
    })

const OKdata2 = (url) => {
    ruleForm.photo = url;
}



onMounted(() => {
    if (!props.isAdd) {
        ruleForm.levelLimit = props.row.levelLimit;
        ruleForm.type = props.row.type;
        ruleForm.discountValue = props.row.discountValue;
        ruleForm.description = props.row.description;
        ruleForm.maxDiscountValue = props.row.maxDiscountValue;
        ruleForm.rule = props.row.rule;
        ruleForm.period = props.row.period;
        ruleForm.photo = props.row.photo;
    }
})

// 确认
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (props.isAdd) {
                memberEquitiesAdd(ruleForm).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '添加成功',
                        })
                        emit('closeOK')
                    }
                })
            } else {
                memberEquitiesUpdate({ ...ruleForm, id: props.row.id }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        emit('closeOK')
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 关闭
const closeAdd = () => {
    emit('closeAdd')
}
</script>

<style lang="scss" scoped>

::v-deep .el-input {
    width: 200px !important;
}

::v-deep .el-select {
    width: 200px !important;
}
</style>